<template>
  <div class="shouye">
    <van-sticky>
    <van-swipe :autoplay="3000" indicator-color="white" class="lb">
      <van-swipe-item>
        <img class="swiper-img"
            src="https://img.xiaopiu.com/userImages/img519701682b5da540.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img class="swiper-img"
            src="https://img.xiaopiu.com/userImages/img519501682b57b9a0.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img class="swiper-img"
            src="https://img.xiaopiu.com/userImages/img519621682b5b24a0.jpg" alt="">
      </van-swipe-item>

      <div>
        <img src="" alt="">
      </div>
    </van-swipe>
  </van-sticky>
    <div class="mid">
      <div class="qn">
        <div class="lt">
          <b>青年汇店</b><br/>
          <span>距您53m</span>
        </div>
        <div class="kg">
          <van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />
        </div>
      </div>
      <div class="x">
      </div>
      <div class="qn" @click="handle()">
        <div class="lt">
          <b>现在下单</b><br/>
          <span>ORDER NOW</span>
        </div>
        <img src="http://www.sunlulu.club/img/xzxd.svg" alt="">
      </div>
      <van-divider class="x"/>
      <div class="qn" @click="zhuan">
        <div class="lt">
          <b>咖啡钱包</b><br/>
          <span>COFFEE WALLET</span>
        </div>
        <img src="http://www.sunlulu.club/img/kfqb.svg" alt="">
      </div>
      <van-divider class="x"/>
      <div class="qn" @click="kf">
        <div class="lt">
          <b>送TA咖啡</b><br/>
          <span>SEND COFFEE</span>
        </div>
        <img src="http://www.sunlulu.club/img/stkf.svg" alt="">
      </div>
      <van-divider class="x"/>
      <div class="qn">
        <div class="lt">
          <b>企业账户</b><br/>
          <span>ENTERPRISE ACCOUNT</span>
        </div>
        <img src="http://www.sunlulu.club/img/qyzh.svg" alt="">
      </div>
      <van-divider class="x"/>
        <img class="dt" src="http://www.sunlulu.club/img/gdyb.png" alt="" @click="kf">
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      checked: true

    }
  },
  methods: {
    onInput(checked) {
      Dialog.confirm({
        title: '提醒',
        message: '是否切换开关？'
      }).then(() => {
        this.checked = checked;
      });
    },
    handle() {
      this.$router.push({name:'caiDan'});
    },
    zhuan() {
      if(localStorage.getItem('token')) {
      this.$router.push({name:'QianBao'});
      }else{
      this.$router.push({name:'Login'});
      }
    },
    kf() {
      this.$router.push({name:'ChongZeng'});
    }
  }
};

</script>
<style scoped>
.shouye{
  display: flex;
  flex-direction: column;
}
.x{
  width: 335px;
	height: 1px;
	color: rgba(80, 80, 80, 1);
	background-color: rgba(242, 242, 242, 1);
	font-size: 14px;
	line-height: 150%;
	text-align: center;
  margin-top: 13px;
  margin-bottom: 13px;
}
.swiper-img{
    width: 100%;
  }
.mid{
  flex: 1;
  padding: 0px 20px 6px 20px;
  }
.foot{
  height: 49px;
}
.qn{
 display: flex;
 justify-content: space-between;
}
.qn b{
  color: rgba(56, 56, 56, 1);
	font-size: 15px;
}

.qn img{
  width: 24px;
  height: 24px;
}
.qn span{
  font-size: 11px;
  display: block;
  color: rgba(128, 128, 128, 1);
}
.dt{
  width: 100%;
}
</style>




